<!-- 便利豆明细 / 充值明细 -->
<template>
	<view class="ManagDetailList">
		<view class="manag dis-cen">
			<view class="size-30 color0" v-if="options.type * 1 != 5">{{detail[options.type * 1].name || '-'}}</view>
			<picker mode="selector" :range="recordData" range-key="name" v-else @change="onChange">
				<view class="size-30 color0 dis-ali">
					{{recordData[recordIndex].name}}
					<text class="iconfont icon-right-1-copy size-26 color0 "></text>
				</view>
			</picker>
			<view class="dates dis-ali" @click="filteringShow=true">
				<text class="font-weight-400 size-24 color3">{{params.dataBean.startTime}}</text>
				<text class="font-weight-400 iconfont icon-zuojiang"></text>
				<text class="font-weight-400 size-24 color3">{{params.dataBean.endTime}}</text>
				<text class="font-weight-400 iconfont icon-riqi"></text>
			</view>
		</view>
		<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
			@up="$event=> postWalletRecordPage($event.num)" :toTop="{width: '100px',height: '100px'}"
			:down="{auto: false}" :up="{auto: true, textNoMore: '-仅展示最近半年的数据-',empty:{use:false}}">
			<view @click="onJumpPage(item)" class="list radius20 f-background"
				:class="{'margin-bottom-24' : index != list.length-1}" v-for="(item,index) in list" :key="index">
				<view class="dis-cen">
					<view class="feed color0" v-if="item.remarks">{{item.remarks || '-'}}</view>
					<text class="font-weight-600 size-38"
						:style="{color: typeData[item.direction].color}">{{typeData[item.direction].biao}}{{item.amount || 0}}</text>
				</view>
				<view class="feed color0" v-if="item.orderNo">订单编号:{{item.orderNo || '-'}}</view>
				<view class="color9 size-28">{{item.createTime || '-'}}</view>
			</view>
			<view v-if="!list.length && !loading">
				<Default :tisName="`暂无${detail[options.type * 1].name}数据！`" />
			</view>
		</mescroll-body>
		<u-popup :show="filteringShow" round="32rpx" @close="filteringShow=false">
			<SelectDate @dateRange="onDateRange" />
		</u-popup>
	</view>
</template>

<script>
	import SelectDate from "@/components/select-date/select-date"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { datesFuture } from "@/utils/index"
	import Default from "@/components/default/default"
	import { WalletRecordPage } from "@/api/index"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { Default, SelectDate },
		data() {
			return {
				filteringShow: false,
				loading: true,
				list: [],
				typeData: {
					1: { color: '#EB0000', biao: '+' },
					0: { color: '#FF8400', biao: '-' }
				},
				recordData: [
					{ name: '账户提现', type: 5 },
					{ name: '保证金提现', type: 7 }
				],
				recordIndex: 0,
				detail: {
					1: { name: '便利豆明细', type: 1, transType: 0 },
					2: { name: '充值明细', type: 1, transType: 1 }, // 团长充值便利豆
					3: { name: '充值记录', type: 3, transType: 1 }, // 跑腿员保证金充值
					4: { name: '保证金明细', type: 3, transType: 0 },
					5: { name: '提现记录', type: 4, transType: 2 },
					6: { name: '资金明细', type: 0, transType: 0 },
					7: { name: '提现记录', type: 1, transType: 2 },
				},
				params: {
					size: 10, // 	每页显示条数
					current: 1, // 当前页
					dataBean: {
						walletType: 1, // 钱包类型 1.便利豆 2.富友
						transType: 0, // 
						startTime: datesFuture(-180), // 开始时间
						endTime: datesFuture(0), // 结束时间
					}
				},
				options: {}
			}
		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
			this.canReset && this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			this.canReset = true // 过滤第一次的onShow事件
		},
		onLoad(options) {
			console.log('options.type', options.type)
			this.params.dataBean.walletType = this.detail[options.type * 1].type
			this.params.dataBean.transType = this.detail[options.type * 1].transType
			// if (options.type == 5) {
			// 	uni.setNavigationBarTitle({
			// 		title: "提现记录"
			// 	})
			// }

			this.options = options
		},
		methods: {
			datesFuture,
			// 列表数据
			async postWalletRecordPage(page) {
				// this.loading = true
				this.params.current = this.mescroll.num
				const { code, data } = await WalletRecordPage(this.params)
				const _this = this
				if (code == "200") {
					console.log('data', data)
					this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data.records); //追加新数据
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
			onChange(e) {
				console.log(e)
				const { value } = e.detail
				const { recordData } = this
				this.recordIndex = value * 1
				this.params.dataBean.walletType = this.detail[recordData[value * 1].type].type
				this.params.dataBean.transType = this.detail[recordData[value * 1].type].transType
				this.mescroll.resetUpScroll() // 重置列表数据为第一页
			},
			onJumpPage(item) {
				if (!item.orderNo) return
				uni.navigateTo({
					url: `/packageOrder/details/substitute?id=${item.orderNo}&type=1`
				});
			},
			// 选择的日期
			onDateRange(e) {
				this.params.dataBean.startTime = e.startTime
				this.params.dataBean.endTime = e.endTime
				this.filteringShow = false
				this.mescroll.resetUpScroll() // 重置列表数据为第一页
			},
		}
	}
</script>

<style lang="scss">
	.ManagDetailList {
		padding: 0 20rpx;

		.manag {
			height: 100rpx;
		}

		.list {
			padding: 30rpx 28rpx 30rpx 36rpx;
			display: grid;
			grid-gap: 24rpx;
		}

		::v-deep.mescroll-body {
			min-height: calc(100vh - 100rpx) !important;
		}

		.dates {
			padding: 0 14rpx;
			height: 52rpx;
			border-radius: 6rpx;
			border: 1px solid #EDEDED;
			background: #ffffff;

			text {
				padding: 0 10rpx;
			}

			.icon-zuojiang {
				transform: rotate(-90deg) scaleX(-1);
				display: block;
			}

			.font-weight-400 {
				color: #D9D9D9;
			}
		}

		// .feed{
		// 	  word-break: break-all;  
		// 	  white-space: normal;  
		// }
	}
</style>